<!-- 主模块内容 -->
<table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>

<!-- layui.all.js 冲突，必须引用这个 -->
<script src="__STATIC__/layuiadmin/layui/layui.js"></script>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-radius layui-btn-primary layui-btn-sm" id="addBtn">添加权限菜单</button>
    </div>
</script>

<script type="text/javascript">
    var ptable=null,treeGrid=null,tableId='treeTable';

    layui.config({
        base: '__STATIC__/layuiadmin/layui/extend/'
    }).extend({
        treeGrid:'treeGrid'
    }).use(['jquery','treeGrid','layer','table'], function(){
        var treeGrid = layui.treeGrid;//很重要
        ptable=treeGrid.render({
            id:tableId
            ,elem: '#'+tableId
            ,idField:'id'
            ,url: "{:url('getMenuList')}"
            ,toolbar: '#toolbar'
            ,cellMinWidth: 100
            ,treeId:'id'//树形id字段名称
            ,treeUpId:'pid'//树形父id字段名称
            ,treeShowName:'name'//以树形式显示的字段
            ,isOpen:false
            ,cols: [[
                {field:'name', title: '名称'}
                ,{field:'id', title: 'ID'}
                ,{field:'path', title: '路由'}
                ,{field:'status', title: '状态'}
                ,{field:'is_show', title: '菜单状态'}
                ,{title: '操作', align:'center'
                    ,templet: function(d){
                        var html='';
                        var editBtn='<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>';
                        var delBtn='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del">删除</a>';
                        return editBtn+delBtn;
                    }
                }
            ]]
            ,page:false
        });

        //监听行工具事件
        treeGrid.on('tool('+tableId+')',function (obj) {
            var id = obj.data.id;
            if(obj.event == 'del'){ //删除行
                layer.confirm('确定删除吗？', ['取消','删除'], function (index, layero) {
                    $.post("{:url('del')}",{'id':id},function (res) {
                        if(res.code == 1){
                            layer.msg(res.msg,{icon: 6});
                            setTimeout(function () {
                                location.reload();
                            }, 1000);
                        }else {
                            layer.msg(res.msg,{icon: 5});
                        }
                    })
                });
            }
            if(obj.event == "edit"){ //修改行
                layer.open({
                    title: ['修改权限', 'font-size: 16px;font-weight: bold;'],
                    type: 2,
                    area: ['70%', '90%'],
                    fix: false,
                    scrollbar: false,
                    maxmin: true,
                    shade: [0.5, '#ffffff'],
                    shadeClose: false,
                    skin: 'layui-layer-rim',
                    content: "{:url('edit', false, false)}" + '/' + 'id' + '/' + id
                });
            }
        });

        $("#addBtn").click(function () {
            layer.open({
                title: ['添加', 'font-size: 16px;font-weight: bold;'],
                type: 2,
                area: ['80%', '70%'],
                fix: false,
                scrollbar: false,
                maxmin: true,
                shade: [0.5, '#ffffff'],
                shadeClose: false,
                skin: 'layui-layer-rim',
                content: "{:url('add', false, false)}"
            });
        });

    });
</script>